const {observable,autorun,decorate,computed,when,reaction}=require('mobx')

// --------------reaction的应用-----------------------
// const todos=observable([
//     {title:"吃饭",done:false},
//     {title:"睡觉",done:false},
//     {title:"打豆豆",done:false},
// ])

// reaction当数据发生变化的时候执行，默认不执行
// 第一个回调函数的返回值作为第二个函数的第一个参数
// reaction(function(){
//     let count=0;
//     for (let todo of todos) {
//         count+=todo.done?1:0
//     }
//     return count
// },function(finishedCount,reaction){
//     console.log(`完成了${finishedCount}的任务`)
//     if(finishedCount>=2){   //当finishedCount大于2的时候撤掉reaction的监听
//         reaction.dispose()
//     }
// })

// todos[0].done=true
// todos[1].done=true
// todos[2].done=true


// ------------------when的应用--------------------------
// let tackObj=observable({
//     test:"做作业",
//     done:false
// })
// 接受两个回调函数作为参数，当第一个函数返回true时执行第二个函数
// 一直监听第一个函数的返回值
// when(function(){
//     return tackObj.done
// },function(){
//     console.log("做作业已经完成")
// })

// 一、采用字符串形式setInterval("foo(id)",1000);
// 二、匿名函数包装 window.setInterval(function() { foo (id); }, 1000);
// 三
// setTimeout(function(){
//     tackObj.done=true
// },3000)


class Todo{
    constructor(){
        this.index=0;
        this.todos=[
            {text:"做作业",done:false},
            {text:"做作业",done:false}
        ]
        for(let todo of this.todos){
            when(function(){
                return todo.done
            },function(){
                console.log(`一个${todo.text}任务已经完成`)
            })
        }
    }
}
decorate(Todo,{
    todos:observable
})
let todo=new Todo()
function change(index){
    todo.todos[index].done=true
}
setTimeout(function(){
    change(0)
},3000)
